
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" /> 
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=EJDBZ-GHO3D-MB24R-HJ3FZ-2B3Y6-52FBX"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
    }
</style>
<title></title>
</head>
<body>

<div id="container"></div>
<script type="text/javascript">
	
			//继承DOMOverlay
			function Donut(options) {
				console.log(options)
				TMap.DOMOverlay.call(this, options);
			}
	
			Donut.prototype = new TMap.DOMOverlay();
	
			// 初始化
			Donut.prototype.onInit = function(options) {
				this.position = options.position;
			};
	
			// 销毁时需解绑事件监听
			Donut.prototype.onDestroy = function() {
				if (this.onClick) {
					this.dom.removeEventListener(this.onClick);
				}
			};
	
			// 创建DOM元素，返回一个DOMElement，使用this.dom可以获取到这个元素
			Donut.prototype.createDOM = function() {
				let dom = document.createElement('div');
				 dom.innerHTML='<div style="width:100%;height:100%;border-radius:50%;overflow:hidden;"><img src="https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/em.jpg" style="width:100%;height:100%;"></div>'
				dom.style.cssText ='position:absolute;top:0px;left:0px;background: #00ff00;width: 30px;height: 30px;line-height: 30px;border-radius: 50%;';
				
				dom.addEventListener('click', function(){
					alert(123)
				});
				return dom;
	
			};
	
			// 更新DOM元素，在地图移动/缩放后执行
			Donut.prototype.updateDOM = function() {
				if (!this.map) {return;}
	
				// 经纬度坐标转容器像素坐标
				let pixel = this.map.projectToContainer(this.position);
	
				// 使饼图中心点对齐经纬度坐标点
				let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
				let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
				this.dom.style.transform = `translate(${left}, ${top})`;
			};
	
			
			
			initMap();
			var map;
	        function initMap() {
	            // 初始化地图
	            map = new TMap.Map("container", {
	                zoom:12, // 设置地图缩放级别
	                center: new TMap.LatLng(39.984104, 116.307503) // 设置地图中心点坐标
				});
	
				let donutList = [
					new Donut({
						map,
						position: new TMap.LatLng(39.96030543872138, 116.25809083213608)
					}),
					new Donut({
						map,
						position: new TMap.LatLng(39.9986945980902, 116.33598362780685)
					}),
					new Donut({
						map,
						position: new TMap.LatLng(40.02906301748584, 116.25499991104516)
					})
				];
	
				donutList.forEach((donut, index) => {
					donut.on('click', () => {
						console.log(`第${index}个环形图被点击，位置为${donut.position}`);
					});
				});
			}
			
			
</script>

</body>
</html>
